<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow">
        <div>
          <a-form size="small" :model="pageData" layout="inline">
            <a-form-item label="登记日期" label-col-flex="80px" :style="{ width: '310px' }">
              <a-range-picker
                popup-container="html"
                class="bacClass"
                @select="onSelect"
                @clear="onClear"
                allow-clear
              />
            </a-form-item>
            <a-form-item label="登记号" label-col-flex="80px" :style="{ width: '310px' }">
              <a-input
                allow-clear
                class="bacClass"
                placeholder=""
                v-model="pageData.registerCode"
                @press-enter="huiche"
              />
            </a-form-item>
            <a-form-item label="布号" label-col-flex="80px" :style="{ width: '310px' }">
              <a-input
                allow-clear
                class="bacClass"
                placeholder=""
                v-model="pageData.customClothCode"
                @press-enter="huiche"
              />
            </a-form-item>
            <a-form-item label="品名" label-col-flex="80px" :style="{ width: '310px' }">
              <a-input
                allow-clear
                class="bacClass"
                placeholder=""
                v-model="pageData.brandName"
                @press-enter="huiche"
              />
            </a-form-item>
            <a-form-item label="客户名称" label-col-flex="80px" :style="{ width: '310px' }">
              <a-input
                allow-clear
                class="bacClass"
                placeholder=""
                v-model="pageData.customName"
                @press-enter="huiche"
              />
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <Toolbar
          style="float: right"
          :items="['查询', '定型工艺维护']"
          @select="selectHandler"
          @shaping="whClick"
        >
        </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <a-spin
        :loading="pageData.pageLoading"
        tip="加载中"
        dot
        style="height: 100%; width: 100%; z-index: 999"
      >
        <AgGridVuesCopys
          :rowHeight="33"
          :headerHeight="33"
          :suppressCopyRowsToClipboard="true"
          rowSelection="multiple"
          @grid-ready="gridReady"
          style="height: 100%"
          :localeText="localeText1"
          :defaultColDef="defaultColDef"
          class="ag-theme-alpine"
          :rowData="table.dataList"
          :columnDefs="tc"
        >
        </AgGridVuesCopys>
      </a-spin>
    </template>
    <paginationCopys
      :page-size-options="pagingList1"
      :total="total"
      show-total
      show-jumper
      show-page-size
      @change="PageSize"
      @page-size-change="change1"
      style="justify-content: center"
      :page-size="size"
      :current="page"
    />
    <a-drawer
      style="z-index: 999"
      ok-text="保存"
      cancel-text="关闭"
      :drawer-style="{ zIndex: 999, border: '1px solid #ccc' }"
      popup-container=".arco-tabs-content"
      height="100%"
      placement="bottom"
      :visible="pageData.whShow"
      unmountOnClose
      @ok="sideOk"
      @cancel="sideNo"
      hide-ok="false"
    >
      <template #title>
        {{ pageData.sideTitle }}
      </template>
      <div>
        <Toolbar
          style="float: right"
          :items="['查询参数', '添加参数']"
          @Rparameter="isShow"
          @addParameterValue="addParameterValue"
        ></Toolbar>
      </div>
      <div style="height: 95%">
        <a-spin
          :loading="pageData.pageLoading"
          tip="加载中"
          dot
          style="height: 100%; width: 100%; z-index: 999"
        >
          <a-table
            size="small"
            v-if="pageData.isEdit"
            :scrollbar="true"
            sticky-header
            :style="{ width: widthEdit, float: 'left' }"
            stripe
            :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true, type: 'radio' }"
            v-model:selected-keys="selectedRowKeys1"
            row-key="itemId"
            :bordered="{ cell: true }"
            :pagination="false"
            :columns="tableColumns3"
            :data="pageData.isUpholdList"
            :summary="getSummaries"
            :summary-span-method="spanMethod"
          >
            <template #itemId="{ record }">
              {{ record.itemId }}
            </template>
            <template #itemName="{ record }">
              {{ record.itemName }}
            </template>
          </a-table>
          <a-table
            v-if="pageData.isUphold"
            style="float: right; width: 69%"
            stripe
            :bordered="{ cell: true }"
            :scrollbar="true"
            sticky-header
            size="small"
            :columns="tableColumns4"
            :data="pageData.isUpholdList2"
            v-model:selected-keys="selectedRowKeys2"
            row-key="id"
            :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }"
            :pagination="false"
            :summary="getSummaries2"
            :summary-span-method="spanMethod2"
          >
            <template #serialNumber="{ record }">
              {{ record.serialNumber }}
            </template>
            <template #itemDepict="{ record }">
              {{ record.itemDepict }}
            </template>
            <template #parameterName="{ record }">
              {{ record.parameterName }}
            </template>
            <template #parameterValue="{ record }">
              <a-dropdown trigger="contextMenu" alignPoint :style="{ display: 'block' }">
                <a-input
                  v-if="pageData.hide"
                  v-model="record.parameterValue"
                  class="bacClass"
                  @change="edit"
                  :style="{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: 'var(--color-fill-2)',
                  }"
                />
                <template #content>
                  <a-doption @click="clear">清除参数</a-doption>
                </template>
              </a-dropdown>
            </template>
            <template #colorDepth="{ record }">
              <a-select
                popup-container="html"
                v-if="pageData.hide"
                class="bacClass"
                :loading="loading"
                @search="handleSearch"
                v-model="record.colorDepth"
                :filter-option="false"
                allow-search
                allow-clear
                @focus="focusSel"
                @change="edit"
              >
                <a-option v-for="item in pageData.nameList">{{ item.shade }}</a-option>
              </a-select>
            </template>
            <template #remark="{ record }">
              <a-input
                v-if="pageData.hide"
                v-model="record.remark"
                class="bacClass"
                @change="edit"
              />
            </template>
            <template #del="{ record }">
              <icon-delete
                v-if="record.adjuvantCode != ''"
                style="cursor: pointer; color: red; font-size: 22px"
                @click="delRow(record)"
              />
            </template>
          </a-table>
        </a-spin>
      </div>
      <!-- <div class="home">
                在需要右键菜单的元素，绑定contextmenu事件
                <div class="test" v-for="item in pageData.menus" :key="item">
                    {{ item }}
                </div>
                右键菜单部分
                <ul v-show="visible1" class="contextmenu" style="z-index:9999"
                    :style="{ left: position.left + 'px', top: position.top + 'px', display: (visible1 ? 'block' : 'none') }">
                    <a-button class="item" @click="clear">清除参数</a-button>
                </ul>-
            </div> -->
    </a-drawer>
    <a-modal
      fullscreen
      v-model:visible="visibleCS"
      :on-before-ok="handleOk"
      @cancel="handleCancel"
      :mask-closable="false"
    >
      <template #title> 定型参数设置 </template>
      <div style="width: 60%; display: flex; justify-content: space-between">
        <div>
          <span>参数：</span
          ><a-input
            @press-enter="Query"
            class="bacClass"
            v-model="parameters"
            :style="{ width: '200px' }"
            allow-clear
          />
        </div>
        <Toolbar :items="['查询']" @select="Query"></Toolbar>
      </div>
      <a-table
        :style="{ height: '600px', marginTop: '10px' }"
        :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }"
        row-key="isTypeIds"
        v-model:selected-keys="selectedRowKeys5"
        stripe
        :bordered="true"
        :scrollbar="true"
        sticky-header
        :pagination="false"
        :columns="tableColumns5"
        :data="dataList"
      >
      </a-table>
      <paginationCopys
        :page-size-options="pagingList1"
        :total="listPage.total"
        show-total
        show-jumper
        show-page-size
        @change="PageSize3"
        @page-size-change="change3"
        style="justify-content: center; margin-top: 50px"
        :page-size="listPage.size"
        :current="listPage.page"
      />
    </a-modal>
  </pageTabelLayout>
</template>
<script lang="ts">
  import { pagingList } from '@/api/paging'
  import { post } from '@/api/http'
  import {
    useTable,
    useRowKey,
    useTableColumn,
    usePagination,
    useRowSelection,
  } from '@/hooks/table'
  import emitter from '@/hooks/useEventBus'
  import { ref, reactive, onMounted, toRefs, watch } from 'vue'
  import Toolbar from '@/components/Toolbar.vue'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import { FormInstance } from '@arco-design/web-vue/es/form'
  import { baseURL } from '../../../../api/axios.config'
  import axios from 'axios'
  import filedownload from 'js-file-download'
  import PageTabelLayout from '@/components/pageTabelLayout.vue'
  
  import { localeText } from '@/api/aggridZw'
  import { AsymmetricKeyDetails } from 'crypto'

  interface BrandInfo {
    id: any
    remark: string | undefined
    createName: string | undefined
    createTime: string | undefined
    updateName: string | undefined
    updateTime: string | undefined
    deleteState: any
    serial: any
    itemId: any
    itemName: any
    colorDepth: any
  }

  export default {
    name: 'ShapingProcess',
    setup() {
      let selectedRowKeys1 = ref()
      let selectedRowKeys2 = ref()
      const total = ref(10)
      const page = ref(1)
      const size = ref(10)
      const tablediv = ref(null)
      const headerShow = ref<boolean>(true)
      const scrollbar = ref(true)
      const scroll = {
        x: 2000,
        y: 200,
      }
      //分页
      function PageSize(val: any) {
        page.value = val
        doRefresh()
      }
      function change1(val: any) {
        size.value = val
        doRefresh()
      }

      //查询方法
      function doRefresh() {
        pageData.pageLoading = true
        var startDate = pageData.dropDownData.startDate
        var endDate = pageData.dropDownData.endDate
        let data1 = startDate
        let data2 = endDate
        var formatDate1 = new Date(startDate)
        var formatDate2 = new Date(endDate)
        if (formatDate1 > formatDate2) {
          startDate = data2 ? data2 + ' 00:00:00' : ''
          endDate = data1 ? data1 + ' 23:59:59' : ''
        } else {
          startDate = data1 ? data1 + ' 00:00:00' : ''
          endDate = data2 ? data2 + ' 23:59:59' : ''
        }
        post({
          url: '/pdm/DevFabricInfo/getPage',
          data: {
            page: page.value,
            size: size.value,
            deleteState: 0,
            startDate: startDate,
            endDate: endDate,
            registerCode: pageData.registerCode,
            customClothCode: pageData.customClothCode,
            brandName: pageData.brandName,
            customName: pageData.customName,
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              table.handleSuccess(data.list)
              gridOption.value.setRowData(data.list)
              total.value = data.total
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }

      const { selectedRowKeys, onSelectionChange } = useRowSelection()
      const pagination = usePagination(doRefresh)
      const table = useTable()
      const rowKey = useRowKey('id')

      const tableColumns = useTableColumn([
        {
          title: '登记号',
          key: 'registerCode',
          dataIndex: 'registerCode',
          width: 150,
        },
        {
          title: '登记日期',
          key: 'registerDate',
          dataIndex: 'registerDate',
          width: 150,
        },
        {
          title: '客户名称',
          key: 'customName',
          dataIndex: 'customName',
          width: 150,
        },
        {
          title: '布号',
          key: 'customClothCode',
          dataIndex: 'customClothCode',
          width: 150,
        },
        {
          title: '品名',
          key: 'brandName',
          dataIndex: 'brandName',
          width: 150,
        },
        {
          title: '单位',
          key: 'unit',
          dataIndex: 'unit',
          width: 150,
        },
        {
          title: '门幅',
          key: 'validWidth',
          dataIndex: 'validWidth',
          width: 150,
        },
        {
          title: '克重',
          key: 'fabricWeight',
          dataIndex: 'fabricWeight',
          width: 150,
        },
        {
          title: '布类类别',
          key: 'clothType',
          dataIndex: 'clothType',
          width: 150,
        },
        {
          title: '面料类型',
          key: 'fabricType',
          dataIndex: 'fabricType',
          width: 150,
        },
        {
          title: '创建人',
          key: 'createName',
          dataIndex: 'createName',
          width: 150,
        },
        {
          title: '创建时间',
          key: 'createTime',
          dataIndex: 'createTime',
          width: 200,
        },
        {
          title: '最后修改人',
          key: 'updateName',
          dataIndex: 'updateName',
          width: 150,
        },
        {
          title: '最后修改时间',
          key: 'updateTime',
          dataIndex: 'updateTime',
          width: 200,
        },
      ])

      //项目
      const tableColumns3 = reactive([
        {
          title: '序号',
          key: 'itemId',
          dataIndex: 'itemId',
          slotName: 'itemId',
          width: 150,
        },
        {
          title: '项目',
          key: 'itemName',
          dataIndex: 'itemName',
          slotName: 'itemName',
          width: 150,
        },
      ])

      //项目参数
      const tableColumns4 = reactive([
        // {
        //     title: "序号",
        //     key: "serialNumber",
        //     dataIndex: "serialNumber",
        //     width: 150
        // },
        {
          title: '项目',
          key: 'itemDepict',
          dataIndex: 'itemDepict',
          slotName: 'itemDepict',
          width: 150,
        },
        {
          title: '参数',
          key: 'parameterName',
          dataIndex: 'parameterName',
          slotName: 'parameterName',
          width: 150,
        },
        {
          title: '参数值',
          key: 'parameterValue',
          dataIndex: 'parameterValue',
          slotName: 'parameterValue',
          width: 150,
        },
        {
          title: '颜色深浅',
          key: 'colorDepth',
          dataIndex: 'colorDepth',
          slotName: 'colorDepth',
          width: 150,
        },
        {
          title: '备注',
          key: 'remark',
          dataIndex: 'remark',
          slotName: 'remark',
          width: 150,
        },
        {
          title: '操作',
          key: 'del',
          dataIndex: 'del',
          slotName: 'del',
          width: 80,
        },
      ])

      let tc: any[] = tableColumns.map((o) => {
        let obj = {
          headerName: o.title,
          field: o.key,
          pinned: o['fixed'],
        }
        return obj
      })

      let a = [
        {
          showRowGroup: 'hide_def',
          headerName: '',
          checkboxSelection: true,
          headerCheckboxSelection: true,
          pinned: 'left',
          width: 50,
          resizable: false,
          filter: false,
          sortable: false,
          minWidth: 50,
          maxWidth: 50,
          lockPosition: 'left',
        },
      ]
      tc = a.concat(tc)

      const dataForm = reactive<BrandInfo>({
        id: null,
        remark: '',
        createName: '',
        createTime: '',
        updateName: '',
        updateTime: '',
        deleteState: 0,
        serial: 0,
        itemId: null,
        itemName: '',
        colorDepth: '',
      })

      const pageData = reactive<{
        showAdd: boolean
        sideTitle: string
        pageLoading: boolean
        edit: boolean
        rHeight: any
        isEdit: boolean
        tablediv: any
        theight: number
        whShow: boolean
        testModeCode: boolean
        menuVisible: boolean
        CurrentRow: boolean
        styleMenu: boolean
        btn: boolean
        menus: any[]
        isEdit2: boolean
        registerDate: any
        registerCode: any
        customClothCode: any
        brandName: any
        customName: any
        isDetailList: any[]
        isUphold: boolean
        isUpholdList: any[]
        isUpholdList2: any[]
        nameList: any[]
        hide: boolean
        dropDownData: any
      }>({
        showAdd: false,
        sideTitle: '',
        pageLoading: false,
        edit: false,
        rHeight: 0,
        isEdit: false,
        tablediv: null,
        theight: 0,
        whShow: false,
        testModeCode: false,
        menuVisible: false,
        CurrentRow: false,
        styleMenu: false,
        btn: false,
        menus: [],
        isEdit2: false,
        registerDate: '',
        registerCode: '',
        customClothCode: '',
        brandName: '',
        customName: '',
        isDetailList: [],
        isUphold: false,
        isUpholdList: [],
        isUpholdList2: [],
        nameList: [],
        hide: true,
        dropDownData: {},
      })

      onMounted(() => {
        doRefresh()
        // 切换tap到本页面执行的方法
        emitter.on('ShapingProcess', () => {
          doRefresh()
        })
        pageData.rHeight = document.getElementsByClassName('arco-tabs-content')[0]?.clientHeight
        //弹出层的高
        if (pageData.rHeight !== undefined) {
          pageData.rHeight = pageData.rHeight
        }
        window.addEventListener('resize', () => {
          pageData.rHeight = document.getElementsByClassName('arco-tabs-content')[0]?.clientHeight
          //弹出层的高
          if (pageData.rHeight !== undefined) {
            pageData.rHeight = pageData.rHeight
          }
        })
        // //右键 清除参数按钮 位置
        // document.addEventListener("click", function (e) {
        //     position.value.top = e.clientY - Number(100)
        //     position.value.left = e.clientX - Number(280)
        // })
      })

      //查询按钮
      const selectHandler = () => {
        page.value = 1
        doRefresh()
      }

      // 表格准备事件
      //未处理
      const gridOption = ref()
      const gridReady = (params: any) => {
        gridOption.value = params.api
      }

      //保存
      const formRef = ref<FormInstance>()
      const sideOk = () => {
        if (pageData.isUpholdList2.length === 0) {
          Message.warning('至少构建一条数据!')
          return
        }
        for (let i = 0; i < pageData.isUpholdList2.length; i++) {
          if (pageData.isUpholdList2[i].parameterValue === '') {
            Message.warning('参数值不能为空!')
            return false
          }
          if (pageData.isUpholdList2[i].colorDepth === '') {
            Message.warning('颜色深浅不能为空!')
            return false
          }
        }
        pageData.pageLoading = true
        pageData.isUpholdList2.forEach((item: any) => {
          item['isTypeIds'] = isTypeIds++
        })
        let list1 = pageData.isUpholdList.filter((o: any) => {
          return (o.id = selectedRowKeys1.value[0])
        })
        post({
          url: '/dwWorkShop/StereotypeCraft/save',
          data: {
            fabricId: list1[0].fabricId,
            list2: pageData.isUpholdList2,
          },
        })
          .then((res: any) => {
            if (res.code == 200) {
              Message.success(res.message)
              doRefresh()
              sideNo()
            } else {
              Message.error(res.message)
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }

      //关闭
      const sideNo = () => {
        pageData.whShow = false
        pageData.isEdit = false
        pageData.edit = false
        pageData.menuVisible = false
        pageData.isUphold = false
        selectedRowKeys1.value = []
        selectedRowKeys2.value = []
        widthEdit.value = '100%'
        pageData.pageLoading = false
      }

      const handleChange = (_data: any) => {
        table.handleSuccess(_data)
      }
      const defaultColDef = {
        sortable: true,
        resizable: true,
        filter: true,
      }

      //表格中文显示
      const localeText1: any = ref(localeText)

      //回车模糊查询
      const huiche = () => {
        doRefresh()
      }

      let isTypeIds = 0
      //点击定型工艺维护  查询项目详情
      const whClick = () => {
        if (gridOption.value.getSelectedRows().length === 0) {
          Message.error('请先勾选')
          return
        } else if (gridOption.value.getSelectedRows().length > 1) {
          Message.error('只能选择一条数据')
          return
        }
        post({
          url: '/pdm/DevFabricInfo/getStereo',
          data: gridOption.value.getSelectedRows(),
        }).then(({ data, code }: any) => {
          if (code == 200) {
            pageData.isUpholdList = data
          }
          pageData.whShow = true
          pageData.isEdit = true
          pageData.btn = true
          pageData.sideTitle = '定型工艺维护'
        })
      }

      //项目参数宽度动态设置
      const widthEdit = ref<any>('100%')
      const isShow = () => {
        if (selectedRowKeys1.value.length === 0) {
          Message.error('请先勾选一条数据！')
          return
        }

        let dataListArray = pageData.isUpholdList.filter((val: any) => {
          return val.itemId == selectedRowKeys1.value
        })
        if (pageData.edit == false) {
          pageData.pageLoading = true
          post({
            url: '/dwWorkShop/StereotypeCraft/getList',
            data: [
              {
                itemName: dataListArray[0].itemName,
                fabricId: dataListArray[0].fabricId,
              },
            ],
          })
            .then(({ data, code }: any) => {
              if (code == 200) {
                pageData.isEdit = true
                pageData.btn = false
                if ((pageData.isEdit = true)) {
                  widthEdit.value = '30%'
                } else {
                  widthEdit.value = '100%'
                }
                pageData.isUphold = true
                pageData.isUpholdList2 = data[0].StereotypeCraft
              }
            })
            .catch(console.log)
            .finally(() => {
              pageData.pageLoading = false
            })
        } else {
          Modal.confirm({
            title: '系统提示',
            content: '是否需要保存数据?',
            onOk() {
              sideOk()
              pageData.edit = false
            },
          })
        }
      }

      // //右键菜单
      // const visible1 = ref(false)
      // const position = ref({
      //     top: 0,
      //     left: 0
      // })
      // const rightClickItem = ref('')
      // //打开菜单
      // const openMenu = (e: any, item: any) => {
      //     if (gridOption3.value.getSelectedRows().length === 0) {
      //         Message.error('请先勾选')
      //         return
      //     }
      //     document.addEventListener("click", function (e) {
      //         position.value.top = e.clientY - Number(100)
      //         position.value.left = e.clientX - Number(280)
      //     })
      //     visible1.value = true
      //     rightClickItem.value = item
      // }
      // //关闭菜单 监听
      // const closeMenu = () => {
      //     visible1.value = false
      // }
      // watch(visible1, () => {
      //     if (visible1.value) {
      //         document.body.addEventListener('click', closeMenu)
      //     } else {
      //         document.body.removeEventListener('click', closeMenu)
      //     }
      // })

      //底部合计条数
      var topRows = [{ itemId: '记录条数：', itemName: total }]

      //表格中文显示
      const pagingList1: any = ref(pagingList)

      //清除参数按钮
      const clear = () => {
        Modal.confirm({
          title: '系统提示',
          content: '确认删除参数?',
          onOk() {
            pageData.isUpholdList2.forEach((o: any) => {
              o.parameterValue = ''
            })
          },
        })
      }

      //底部合计行
      const getSummaries = () => {
        return [
          {
            itemId: '记录条数：' + pageData.isUpholdList.length + '条',
          },
        ]
      }
      const getSummaries2 = () => {
        if (pageData.isUpholdList2.length === 0) {
          pageData.hide = false
        } else {
          pageData.hide = true
        }
        return [
          {
            itemDepict: '记录条数：' + pageData.isUpholdList2.length + '条',
          },
        ]
      }

      const spanMethod = ({ rowIndex, columnIndex }: any) => {
        if (rowIndex === 0 && columnIndex === 1) {
          return {
            colspan: 2,
          }
        }
      }
      const spanMethod2 = ({ rowIndex, columnIndex }: any) => {
        if (rowIndex === 0 && columnIndex === 1) {
          return {
            colspan: 6,
          }
        }
      }

      //下拉框得到焦点
      const focusSel = () => {
        selCxAll({ shade: '', deleteState: 0 })
      }

      //下拉数据
      const options = ref<any>(pageData.nameList)
      const loading = ref(false)
      const handleSearch = (value: any) => {
        if (value) {
          const ob = { shade: value, deleteState: 0 }
          loading.value = true
          selCxAll(ob)
          options.value = pageData.nameList
          loading.value = false
        } else {
          options.value = []
        }
      }
      //下拉框查询
      function selCxAll(val: any) {
        post({
          url: '/pdm/shade/getFieldValue',
          data: val,
        }).then(({ data, code }: any) => {
          if (code === 200) {
            pageData.nameList = data
          } else {
            Message.error({
              content: '查询失败！',
              duration: 5000,
            })
          }
        })
      }
      const edit = () => {
        pageData.edit = true
      }

      const addParameterValue = () => {
        if (selectedRowKeys1.value.length === 0) {
          Message.error('请勾选一条数据!')
          return false
        }
        visibleCS.value = true
      }

      //添加参数 弹窗
      const selectedRowKeys5: any = ref([])
      let dataList: any = ref([])
      const parameters: any = ref('')
      const visibleCS = ref(false)
      const listPage: any = reactive({
        total: 0,
        size: 10,
        page: 1,
      })
      const PageSize3 = (val: any) => {
        listPage.page = val
        listQuery()
      }

      const change3 = (val: any) => {
        listPage.size = val
        listQuery()
      }

      const tableColumns5 = useTableColumn([
        {
          title: '项目',
          key: 'classifyDescribe',
          dataIndex: 'classifyDescribe',
          width: 300,
        },
        {
          title: '参数',
          key: 'parameters',
          dataIndex: 'parameters',
          width: 300,
        },
        {
          title: '参数值',
          key: 'parameterValues',
          dataIndex: 'parameterValues',
          width: 300,
        },
        {
          title: '备注',
          key: 'remark',
          dataIndex: 'remark',
          width: 300,
        },
      ])

      const Query = () => {
        listPage.page = 1
        listQuery()
      }
      const listQuery = () => {
        pageData.pageLoading = true
        let list = pageData.isUpholdList.filter((val: any) => {
          return val.itemId == selectedRowKeys1.value
        })
        post({
          url: '/pdm/ParameterClassifySon/selectPage',
          data: {
            page: listPage.page,
            size: listPage.size,
            deleteState: 0,
            classifyDescribe: list[0].itemName,
            parameters: parameters.value,
          },
        })
          .then(({ data, code }: any) => {
            if (code === 200) {
              listPage.total = data.total
              dataList.value = data.list
              dataList.value.forEach((item: any) => {
                item['isTypeIds'] = isTypeIds++
              })
            }
          })
          .catch(console.log)
          .finally(() => {
            pageData.pageLoading = false
          })
      }
      const handleOk = () => {
        if (selectedRowKeys5.value.length === 0) {
          Message.error('请勾选数据!')
          return false
        }

        let listArray: any = []
        for (let i = 0; i < dataList.value.length; i++) {
          if (selectedRowKeys5.value.includes(dataList.value[i].isTypeIds)) {
            listArray.push(dataList.value[i])
          }
        }
        if (pageData.isUpholdList2.length != 0) {
          let wlAarray: any = []
          for (let i = 0; i < listArray.length; i++) {
            wlAarray.push(listArray[i].parameters)
          }

          for (let i = 0; i < pageData.isUpholdList2.length; i++) {
            if (wlAarray.includes(pageData.isUpholdList2[i].parameterName)) {
              Message.error(`不能重复添加 ${pageData.isUpholdList2[i].parameterName} 的参数!`)
              return false
            }
          }
        }
        listArray.forEach((e: any) => {
          e['itemDepict'] = e['classifyDescribe']
          e['parameterName'] = e['parameters']
          e['parameterValue'] = e['parameterValues']
          e['remark'] = e['remark']
          e['id'] = null
          delete e.classifyDescribe
          delete e.parameters
          delete e.parameterValues
          delete e.parameterClassifyID
          e['isTypeIds'] = isTypeIds++
        })
        pageData.isUpholdList2.push(...listArray)
        parameters.value = ''
        dataList.value = []
        selectedRowKeys5.value = []
        listPage.total = 0
        visibleCS.value = false
        pageData.isUphold = true
        widthEdit.value = '30%'
        return true
      }
      const handleCancel = () => {
        parameters.value = ''
        dataList.value = []
        selectedRowKeys5.value = []
        listPage.total = 0
        visibleCS.value = false
      }

      //项目参数删除
      const delRow = (record: any) => {
        if (pageData.isUpholdList2.length === 1) {
          Message.warning('至少保留一条数据!')
          return
        }
        pageData.isUpholdList2 = pageData.isUpholdList2.filter(function (o: any) {
          return o['parameterName'] !== record['parameterName']
        })
      }
      return {
        delRow,
        visibleCS,
        parameters,
        selectedRowKeys5,
        dataList,
        listPage,
        PageSize3,
        change3,
        tableColumns5,
        listQuery,
        Query,
        handleOk,
        handleCancel,
        // closeMenu,
        // rightClickItem,
        // visible1,
        // position,
        // openMenu,
        options,
        loading,
        pagingList1,
        scroll,
        scrollbar,
        tablediv,
        localeText1,
        formRef,
        pageData,
        dataForm,
        pagination,
        table,
        rowKey,
        headerShow,
        total,
        page,
        size,
        widthEdit,
        selectedRowKeys,
        selectedRowKeys1,
        selectedRowKeys2,
        topRows,
        tc,
        tableColumns,
        tableColumns3,
        tableColumns4,
        defaultColDef,
        gridOption,
        gridReady,
        clear,
        sideOk,
        sideNo,
        isShow,
        whClick,
        huiche,
        selectHandler,
        handleChange,
        PageSize,
        change1,
        spanMethod,
        spanMethod2,
        getSummaries2,
        getSummaries,
        selCxAll,
        handleSearch,
        focusSel,
        edit,
        addParameterValue,
        onSelect(dateString: any, date: any) {
          if (dateString[0]) {
            const d1 = new Date(dateString[0])
            const d2 = new Date(dateString[1])
            if (d1 > d2) {
              dateString.reverse()
            }
          }
          pageData.dropDownData = {
            startDate: dateString[0],
            endDate: dateString[1],
          }
        },
        onClear() {
          pageData.dropDownData = {}
        },
      }
    },
    components: { Toolbar, PageTabelLayout,  },
  }
</script>
<style scoped lang="less">
  //右键菜单设置
  // .contextmenu {
  //     width: 100px;
  //     margin: 0;
  //     background: #fff;
  //     z-index: 9999;
  //     position: absolute;
  //     list-style-type: none;
  //     padding: 5px 0;
  //     border-radius: 4px;
  //     font-size: 12px;
  //     font-weight: 400;
  //     color: #333;
  //     box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

  //     .item {
  //         padding: 0 20px;
  //         height: 35px;
  //         width: 100%;
  //         line-height: 35px;
  //         color: rgb(29, 33, 41);
  //         cursor: pointer;

  //     }

  //     .item:hover {
  //         background: rgb(229, 230, 235);
  //     }
  // }
  :deep(.arco-picker input) {
    padding-left: 0 !important;
  }
  :deep(.arco-picker) {
    padding-left: 0 !important;
  }
  :deep(.arco-picker-separator) {
    padding: 0 !important;
  }
</style>
